{# The snapshot (ui_resources.overview) below the charts: the containers,
   what loads inside the webserver and the servers outside Docker; the
   split above them is ``_totals.html``. #}
{% from "components/macros/layout.html" import card, progress, ranked_rows %}
{% from "components/macros/table.html" import data_table %}
{% macro share(value) -%}
<span class="inline-flex items-center gap-2"><span class="w-24">{{ progress(value / 100, "ok", "Share of this stack", "h-1.5") }}</span><span class="w-12">{{ value }}%</span></span>
{%- endmacro %}
<div class="space-y-4">
  {% call card("Containers", id="resources-containers") %}
    {% if resources.note %}<p class="text-sm text-aegis-muted">{{ resources.note }}</p>
    {% else %}
    {{ data_table([
      {"key": "service", "label": "Part", "kind": "link", "target": "#overseer-main"},
      {"key": "name", "label": "Container", "kind": "code"},
      {"key": "status", "label": "State", "kind": "status"},
      {"key": "cpu", "label": figure_names.cpu, "align": "right"},
      {"key": "memory_used", "label": figure_names.memory, "align": "right"},
      {"key": "share", "label": "Of this stack", "render": share, "align": "right"},
    ], resources.rows, empty="No container is running.", row_id="container") }}
    {% endif %}
  {% endcall %}
  {# Inside the webserver, which Docker sees as one container
     (ui_resources.load_costs). #}
  {% call card("Inside the webserver", subtitle="To load each service") %}
    {% if resources.load %}
    {{ ranked_rows(resources.load.rows, columns=True) }}
    <p class="text-xs text-aegis-muted">Each part's own cost: loaded on top of Python and the app's core ({{ resources.load.core }}) and the parts it uses, so a library counts with the first part that needs it. Measured once a day.</p>
    {% else %}
    <p data-measuring class="text-sm text-aegis-muted">Measuring what each service costs to load, one at a time.</p>
    {% endif %}
  {% endcall %}
  {% if resources.outside %}
  {% call card("Outside Docker") %}
    <ul class="space-y-2 text-sm">
      {% for o in resources.outside %}<li data-outside="{{ o.page }}"><span class="text-aegis-text">{{ o.title }}</span> <span class="text-aegis-muted">{{ o.note }}</span></li>{% endfor %}
    </ul>
  {% endcall %}
  {% endif %}
  <p class="text-xs text-aegis-muted">The host is what Docker runs on: on Docker Desktop, its VM.</p>
</div>